import React from 'react';
import './sidebar.scss'
import axios from 'axios'

export default   class Sidebar extends React.Component{
    constructor(props){
        super(props)
        this.state={
            MainList:[],
            arra:[],
            brandList:[],
            one:false,
            two:false,
        }
    }
    leave(){
        this.setState({
            one:false,
        })
    }
    enter(index,e){
        const {MainList} = this.state
        var arra=[]
        MainList.some((item,i,arr)=>{
            if(index==i){
                arra.push(arr[i].goods)
            }
        })
        this.setState({
            one:true,
            two:false,
            arra:arra[0]
        })
    }
    out(){
        this.setState({
            two:false
        })
    }
    over(){
        this.setState({
            one:false,
            two:true
        })
    }
    componentWillMount(){
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then((res)=>{
            if(res.data){
                this.setState({
                    MainList:res.data.result
                })
            }
        })
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/brand?limit=6').then((res)=>{
            if(res.data){
                this.setState({
                    brandList:res.data.result
                })
            }
        })
    }
    render(){
        const {MainList,arra,two,one,brandList} = this.state
        return(
                <div id="sid">
                    <div className="banner" >
                        <div className="sidebar">
                            <ul className="menu"> 
                            {
                                MainList&&MainList.map((item,index)=>{
                                    return (
                                        <li key={index} onMouseOver={this.enter.bind(this,index)} >
                                            <span>{item.name}</span>
                                            <span>{item.children[0].name}</span>
                                            {item.children[1]&&<span>{item.children[1].name}</span>}
                                            
                                        </li>
                                    )
                                })
                            }
                                
                                <li  onMouseOver={this.over.bind(this)}>
                                    <span href="#">品牌</span>
                                    <span href="#">品牌推荐</span>
                                </li>
                            </ul>
                            
                        </div>
                        {one&&<div className="content">
                                <h4>分类推荐<span>根据您的购买或者浏览记录推荐</span></h4>
                                    <div   className="list">
                                        {
                                            arra&&arra.map((A,index)=>{
                                                return(
                                                    <dl key={index} >
                                                        <dt>
                                                            <img src={A.picture} alt=""  />
                                                        </dt>
                                                        <dd>
                                                            <p>{A.name}</p>
                                                            <p>{A.desc}</p>
                                                            <p onMouseOut={this.leave.bind(this)}>￥<span >{A.price}</span></p>
                                                        </dd>
                                                    </dl>
                                                )
                                            })
                                        }
                                    </div>
                            </div>}
                            {
                                two&&(
                                    <div className="content">
                                        <h4>分类推荐<span>根据您的购买或者浏览记录推荐</span></h4>
                                        <div   className="listt">
                                            {
                                                brandList&&brandList.map((A,index)=>{
                                                    return (
                                                        <dl key={index}>
                                                            <dt>
                                                                <img src={A.picture} alt="" />
                                                            </dt>
                                                            <dd>
                                                                <p>{A.place}</p>
                                                                <p>{A.name}</p>
                                                                <p onMouseOut={this.out.bind(this)}>{A.desc}</p>
                                                            </dd>
                                                        </dl>
                                                    )
                                                })
                                            }
                                           
                                        </div>
                                    </div>
                                )
                            }
                       
                    </div>
                </div>
        )
    }
}